{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import docs from 'docs:@react-spectrum/progress';
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
import packageData from '@react-spectrum/progress/package.json';

```jsx import
import {ProgressCircle} from '@react-spectrum/progress';
import {View} from '@react-spectrum/view';
```

---
category: Status
keywords: [progress circle]
---

# ProgressCircle

<PageDescription>{docs.exports.ProgressCircle.description}</PageDescription>

<HeaderInfo
  packageData={packageData}
  componentNames={['ProgressCircle']}
  sourceData={[
    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/progress-circle/'}
  ]}
  since="3.0.0" />

## Example

```tsx example
<ProgressCircle aria-label="Loading…" value={50} />
```

## Value

ProgressCircles are controlled with the `value` prop.
By default, the `value` prop represents the current percentage of progress, as the minimum and maximum values default to 0 and 100, respectively.

```tsx example
<ProgressCircle aria-label="Loading…" value={25} />
```

Alternatively, a different scale can be used by setting the `minValue` and `maxValue` props.

```tsx example
<ProgressCircle aria-label="Loading…" minValue={50} maxValue={150} value={100} />
```

### Indeterminate
[View guidelines](https://spectrum.adobe.com/page/progress-circle/#Indeterminate)

By default, ProgressCircles are determinate. Use a determinate ProgressCircle when progress can be calculated against a specific goal.

```tsx example
<ProgressCircle aria-label="Loading…" value={50} />
```

Use an indeterminate ProgressCircle when progress is happening but the time or effort to completion can’t be determined.

```tsx example
<ProgressCircle aria-label="Loading…" isIndeterminate />
```

### Accessibility

An `aria-label` must be provided for accessibility. If the ProgressCircle is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.

If using the `staticColor` prop, ensure the background offers enough contrast for the ProgressCircle to be legible and meets color contrast guidelines.

### Internationalization

To internationalize a ProgressCircle, a localized string should be passed to the `aria-label` prop (or value of the associated `aria-labelledby` element).

For languages that are read right-to-left (e.g. Hebrew and Arabic), the fill of both determinate and indeterminate ProgressCircles continues to spin clockwise.

## Props

<PropTable component={docs.exports.ProgressCircle} links={docs.links} />

## Visual options

### Static color

When a ProgressCircle needs to be placed on top of a dark background, use `staticColor='white'`. When it is placed over a light background, use `staticColor='black'`.

```tsx example
<View backgroundColor="static-blue-700" padding="size-300">
  <ProgressCircle aria-label="Loading…" staticColor="white" isIndeterminate />
</View>
<View backgroundColor="static-yellow-400" padding="size-300">
  <ProgressCircle aria-label="Loading…" staticColor="black" isIndeterminate />
</View>
```

### Size
[View guidelines](https://spectrum.adobe.com/page/progress-circle/#Size)

```tsx example
<ProgressCircle aria-label="Loading…" marginEnd="size-300" size="S" value={15} />
<ProgressCircle aria-label="Loading…" marginEnd="size-300" value={30} />
<ProgressCircle aria-label="Loading…" size="L" value={60} />
```
